import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {message} from "antd";
import day from 'dayjs';
import { useAuthStore } from '../store/authStore';

const originList = [47, 92, 76, 20, 72, 37, 51, 26, 79, 22,
    91, 57, 39, 42, 44, 94, 75, 12, 45, 64,
    73, 59, 96, 41, 93, 56, 71, 63, 86, 16, 19];
function Dashboard() {
    const navigate = useNavigate();
    const { logout, user } = useAuthStore();
    const [year, setYear] = useState(day().format('YY'));
    const [monthDay, setMonthDay] = useState(day().format('MMDD'));
    const [hourMinute, setHourMinute] = useState(day().format('HHmm'));
    const [result, setResult] = useState('');
    const [copyTip, setCopyTip] = useState('');
    console.log('111', originList[0])
    const handleLogout = () => {
        logout();
    };

    const handleGenerate = () => {
        if (year && monthDay && hourMinute){
            const temIndex = monthDay.substr(-2).startsWith('0') ? monthDay.substr(-1) - 1 : monthDay.substr(-2) - 1;
            const formatHM = hourMinute.substr(0, hourMinute.length - 1) + '0';
            const temResult =  (parseInt(`${year}${monthDay}${formatHM}`)*originList[temIndex || 0]).toString().substr(-6);
            console.log('temResult', temResult);
            // 这里可以自定义生成逻辑，暂时简单拼接
            setResult(temResult);
        } else {
            message.warning('请完善表单信息后再提交')        }
    };

    // 复制功能，兼容处理
    const handleCopy = () => {
        if (!result) return;
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(result).then(() => {
                setCopyTip('已复制!');
                setTimeout(() => setCopyTip(''), 1200);
            }).catch(() => {
                fallbackCopyTextToClipboard(result);
            });
        } else {
            fallbackCopyTextToClipboard(result);
        }
    };

    function fallbackCopyTextToClipboard(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';
        textArea.style.top = '-1000px';
        textArea.style.left = '-1000px';
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            document.execCommand('copy');
            setCopyTip('已复制!');
            setTimeout(() => setCopyTip(''), 1200);
        } catch (err) {
            setCopyTip('复制失败');
            setTimeout(() => setCopyTip(''), 1200);
        }
        document.body.removeChild(textArea);
    }

    return (
        <div style={{
            minHeight: '100vh',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            background: 'linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%)',
            fontFamily: 'system-ui, sans-serif',
            padding: '0 16px',
        }}>
            <div style={{
                width: '100%',
                maxWidth: 400,
                background: '#fff',
                borderRadius: 16,
                boxShadow: '0 4px 24px rgba(0,0,0,0.07)',
                padding: '32px 20px',
                display: 'flex',
                flexDirection: 'column',
                gap: 20,
            }}>
                <h1 style={{
                    fontSize: 28,
                    fontWeight: 700,
                    marginBottom: 8,
                    textAlign: 'center',
                    letterSpacing: 2,
                }}>桩密码生成</h1>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <input
                        type="text"
                        maxLength={2}
                        placeholder="年份后两位 (如 24)"
                        value={year}
                        onChange={e => setYear(e.target.value.replace(/[^0-9]/g, ''))}
                        style={inputStyle}
                    />
                    <input
                        type="text"
                        maxLength={4}
                        placeholder="月日 (如 0521)"
                        value={monthDay}
                        onChange={e => setMonthDay(e.target.value.replace(/[^0-9]/g, ''))}
                        style={inputStyle}
                    />
                    <input
                        type="text"
                        maxLength={4}
                        placeholder="时分 (如 0930)"
                        value={hourMinute}
                        onChange={e => setHourMinute(e.target.value.replace(/[^0-9]/g, ''))}
                        style={inputStyle}
                    />
                </div>
                <button
                    onClick={handleGenerate}
                    style={{
                        background: 'linear-gradient(90deg, #2563eb 0%, #60a5fa 100%)',
                        color: '#fff',
                        border: 'none',
                        borderRadius: 8,
                        padding: '6px 0',
                        fontSize: 18,
                        fontWeight: 600,
                        cursor: 'pointer',
                        marginTop: 0,
                        transition: 'background 0.2s',
                    }}
                >
                    生成
                </button>
                <button
                    onClick={() => window.location.reload()}
                    style={{
                        background: 'linear-gradient(90deg, #2563eb 0%, #60a5fa 100%)',
                        color: '#fff',
                        border: 'none',
                        borderRadius: 8,
                        padding: '6px 0',
                        fontSize: 18,
                        fontWeight: 600,
                        cursor: 'pointer',
                        marginTop: 0,
                        transition: 'background 0.2s',
                    }}
                >
                    重置
                </button>
                <div style={{
                    minHeight: 40,
                    marginTop: 0,
                    background: '#f1f5f9',
                    borderRadius: 8,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    fontSize: 18,
                    color: '#2563eb',
                    fontWeight: 500,
                    wordBreak: 'break-all',
                    padding: '0 12px',
                    gap: 8,
                }}>
                    <span style={{flex: 1}}>{result ? result : '生成结果会显示在这里'}</span>
                    {result && (
                        <button
                            onClick={handleCopy}
                            style={{
                                background: '#2563eb',
                                color: '#fff',
                                border: 'none',
                                borderRadius: 6,
                                padding: '6px 12px',
                                fontSize: 14,
                                fontWeight: 500,
                                cursor: 'pointer',
                                marginLeft: 6,
                                transition: 'background 0.2s',
                            }}
                        >
                            复制
                        </button>
                    )}
                    {copyTip && (
                        <span style={{ color: '#16a34a', fontSize: 14, marginLeft: 4 }}>{copyTip}</span>
                    )}
                </div>
                <button
                    onClick={handleLogout}
                    style={{
                        background: 'none',
                        color: '#64748b',
                        border: 'none',
                        marginTop: 0,
                        fontSize: 16,
                        cursor: 'pointer',
                        textDecoration: 'underline',
                    }}
                >
                    退出登录
                </button>
            </div>
        </div>
    );
}

const inputStyle = {
    width: '100%',
    padding: '12px 10px',
    fontSize: 16,
    border: '1px solid #e5e7eb',
    borderRadius: 8,
    outline: 'none',
    background: '#f8fafc',
    boxSizing: 'border-box',
};

export default Dashboard;
